<!--万能表单模块-->
<template>
    <div style="width: 100%;height: 100%;">
        <div class="login-box">
            <div class="login-box-body">
                <div class="login-logo">
                    <span><b>Sea</b>Admin</span>
                </div>
                <p class="login-box-msg">Sign in to start your session</p>

                <form>
                    <div class="box-item">
                        <el-input placeholder="Email" v-model="username"></el-input>
                    </div>
                    <div class="box-item">
                        <el-input placeholder="Password" v-model="password" show-password></el-input>
                    </div>
                    <div class="box-item">
                        <label>
                            <el-checkbox type="checkbox" label="Remember Me"></el-checkbox>
                        </label>
                    </div>
                    <div class="box-item">
                        <div class="pull-left">
                            <a style="padding: 3px">I forgot my password</a>
                            <br>
                            <a style="padding: 3px">Register a new membership</a>
                        </div>
                        <el-button size="large" class="pull-right" @click="login()">Sign In</el-button>
                        <div class="clearfix"></div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">

import ApplicationContext from "@/starter/application-context";
import {ref} from "vue";

/**
 * 登录界面
 */

const username = ref('');
const password = ref('');

const login = ()=>{
    ApplicationContext.login(username.value, password.value);
}

</script>

<style scoped>
.login-logo,
.register-logo {
    font-size: 35px;
    text-align: center;
    margin-bottom: 25px;
    font-weight: 300;
}

.box-item {
    margin: 10px;
}

.login-box,
.register-box {
    width: 360px;
    margin: 7% auto;
}

.login-box-msg,
.register-box-msg {
    margin: 0;
    text-align: center;
    padding: 0 20px 20px 20px;
}
</style>
